<template>
    <layout>

        <mt-header title="作业">
            <a href="/study" slot="left">
                <mt-button  icon="back"></mt-button>
            </a>
        </mt-header>
        <div class="tab_list">
            <mt-navbar class="page-part" v-model="selected">
                <mt-tab-item id="1">今日作业</mt-tab-item>
                <mt-tab-item id="2">历史作业</mt-tab-item>
                <mt-tab-item id="3">未完成</mt-tab-item>
            </mt-navbar>


            <div  class="list_box">
                <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                    <ul class="school_ul"
                        v-infinite-scroll="loadMore"
                        infinite-scroll-disabled="loading"
                        infinite-scroll-distance="50" id="content">

                        <template v-if="selected == '1'">
                            <li class="yuwen" v-for="item in today">
                                <div class="top">
                                    <img :src="api.image + item.courseImage">
                                </div>
                                <div class="con">
                                    <span class="frist">{{ item.courseName }}作业<div>统一</div> </span>
                                    <span class="concon" v-if="item.status == 1">完成时间 {{ item.finishDate | data}}</span>
                                    <span class="concon" v-else>截止时间{{ item.checkDate | data }}</span>
                                    <span class="last">错题数量：{{ item.haveToDo }}/{{ item.totalCount }}</span>
                                </div>
                                <a :href="'/study/homework/practice/result?id=' + item.id" v-if="item.status == 1"><div class="foo">作业报告</div></a>
                                <a :href="'/study/homework/practice?id='+item.id" v-else><div class="foo">做题</div></a>
                            </li>
                        </template>

                        <template v-if="selected == '2'">
                            <li class="yuwen" v-for="item in list">
                                <div class="top">
                                    <img :src="api.image + item.courseImage">
                                </div>
                                <div class="con">
                                    <span class="frist">{{ item.courseName }}作业<div>统一</div> </span>
                                    <span class="concon">已完成  &nbsp;  {{ item.finishDate | data }}</span>

                                    <span class="last">错题数量：{{item.haveToDo}}/{{ item.totalCount }}</span>
                                </div>
                                <a :href="'/study/homework/practice/result?id=' + item.id"><div class="foo">作业报告</div></a>
                            </li>
                        </template>

                        <template v-if="selected == '3'">
                            <li class="yuwen" v-for="item in list">
                                <div class="top">
                                    <img :src="api.image + item.courseImage">
                                </div>
                                <div class="con">
                                    <span class="frist">{{ item.courseName}}作业 </span>
                                    <span class="concon">已完成  {{ item.createDate | data}}</span>
                                    <span class="last">错题数量：{{ item.haveToDo}}/{{ item.totalCount}}</span>
                                </div>
                                <a :href="'/study/homework/practice?id='+item.id"><div class="foo">做题</div></a>
                            </li>
                        </template>


                    </ul>

                    <p v-show="loading" class="page-infinite-loading">
                        <mt-spinner :size="20" type="fading-circle"></mt-spinner>
                        <span>加载中...</span>
                    </p>
                </div>
            </div>

        </div>

    </layout>
</template>
<style lang="scss">
    @import "index.scss";
    img{
        /*background: #000000;*/
    }
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);




    export default {
        components: {
            Layout
        },
        data(){
            return {
                selected: '1',
                loading: false,
                wrapperHeight: 0,
                list: [],
                isShow:false,
                postList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                answerList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },


            }
        },

        filters: {
            data:function (data) {
                var d = new Date(data);
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var seconds = d.getSeconds();
                return   hour + ':' + minutes;
            }

        },

        computed: {
            api(){
                return api();
            },



        },
        watch: {
            selected: function () {
                // let scrollHeight = 0;
                if (this.selected == '2'){
                    this.list = this.postList.list;
                }else if (this.selected == '3'){
                    this.list = this.answerList.list;
                }else{
                    // this.list = this.forumList.list;
                }
                if (this.list.length == 0){
                    window.scrollTo(0, 0);
                    this.loadMore();
                }
            }
        },
        methods: {
            loadMore(){
                if (this.loading){
                    return;
                }
                if (this.selected == '1'){
                    return;
                }else if (this.selected == '2'){
                    if (this.postList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/homework/history', {
                        params: {
                            pageNo: this.postList.nextPage
                        }
                    })
                        .then((response) => {
                            if (response.status == 200){
                                let data = response.data;
                                if (data.code == 200) {
                                    data = data.data;
                                    this.postList.lastPage = data.lastPage;
                                    this.postList.pageNo = data.pageNo;
                                    this.postList.nextPage = data.nextPage;

                                    let list = data.list;
                                    for (let i = 0; i < list.length; i++){
                                        this.postList.list.push(list[i]);
                                    }
                                    this.list = this.postList.list;
                                }

                            }else{
                                this.postList.lastPage = true;
                            }
                            this.loading = false;
                        });
                }else if (this.selected == '3'){
                    if (this.answerList.lastPage){
                        return;
                    }
                    this.loading = true;
                    this.$http.get('/api/homework/unfinished', {
                        params: {
                            pageNo: this.answerList.nextPage
                        }
                    })
                        .then((response) => {
                            if (response.status == 200){
                                let data = response.data;
                                if (data.code == 200) {
                                    data = data.data;
                                    this.answerList.lastPage = data.lastPage;
                                    this.answerList.pageNo = data.pageNo;
                                    this.answerList.nextPage = data.nextPage;

                                    let list = data.list;
                                    for (let i = 0; i < list.length; i++){
                                        this.answerList.list.push(list[i]);
                                    }
                                    this.list = this.answerList.list;
                                }

                            }else{
                                this.answerList.lastPage = true;
                            }
                            this.loading = false;
                        });
                }
            }
        },
        mounted() {
            // this.today();
        },

    }
</script>

